<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS介绍</title>
    <!--CSS全称为层叠样式表，用于设置HTML标签的样式-->
    <!--CSS样式表分为三种：
        内联样式表，使用style属性设置样式，如：
        <p style="color: red;">段落</p>
        内部样式表，使用style标签设置样式，如：
        <style>
            p{
                color: red;
            }
        </style>
        外部样式表，使用link标签引入样式文件，外部样式表的设置和内部样式一样，
        都是使用选择器来决定给哪些标签设置样式，其优先级要低于内部样式表，
        引入方式如下：
        <link rel="stylesheet" href="css/style.css">
        注意：link标签是单标签，没有结束标签-->
    <style>
        /*在style标签内部设置样式，在设置样式时，必须指定给
        哪些元素设置样式，使用选择器指定，如：
            标签选择器，使用标签名称指定，如：p{} 表示给p标签设置样式；
            类选择器，使用.类名指定，如：.p1{} 表示给类名为p1的元素设置样式；
            id选择器，使用#id名指定，如：#p1{} 表示给id名为p1的元素设置样式；
            伪类选择器，使用:伪类名指定，如：p:hover{} 表示给p标签的鼠标悬停时设置样式；
            通配选择器，使用*指定，如：*{} 表示给所有元素设置样式；
            后代选择器，使用标签名称指定，如：p span{} 表示给p标签内部的所有span标签设置样式；
            组合选择器，使用标签名或类名或id名称指定，如：p,p1,.p1, #p1{}
            表示给p标签和p1标签,类名名为.p1,id名为p1的标签统一设置样式；

            id选择器优先级高于类型选择器，类型选择器设置的样式优先级高于标签选择器设置的样式
            */
        /*使用一个大括号表示一组样式*/
        p {
            color: deepskyblue;
            font-size: 50px;
            font-weight: bolder;
        }

        .p1 {
            color: blue;
        }

        .p2 {
            color: black;
        }

        /* :hover 表示当鼠标悬停时的样式 #p01表示当前的样式是给id为p01标签设置的 */
        #p01:hover {
            color: red;
        }

        #p02 {
            font-family: 宋体;
            font-style: italic;
        }

        /*给p标签内部的span设置样式*/
        p span {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--方式一：使用style属性设置样式；内联样式表由于直接在标签内部使用style属性设置样式，
所以其样式优先级最高，会覆盖其他样式表中的样式-->
<p style="color: red;font-size: 30px">段落1</p>
<!--在所有标签都可以通过class属性设置类名，类名可以被多个标签同时使用；
同时一个标签在class属性中可以设置多个类名，针对于多个类名设置样式可以同时生效，
如果存在类型设置的样式冲突，那么最后执行的样式生效；
注意：在设置类名时，类名不能以数字开头，类名中不能包含特殊字符

同时也可以通过id属性设置标签的id，id属性的值在整个页面中必须是唯一的；
如果通过id给标签设置样式，那么该样式的优先级在所有内部样式表和外部样式表中最高，
会覆盖其他样式表中的样式-->
<p id="p01" class="p1">段落</p>
<p id="p02" class="p1">段落</p>
<p class="p2">段落</p>
<p class="p2">段落 <span>段落</span></p>
<span>没有样式的span</span>
</body>
</html>